<template>
    <div class="other-expenses">
        <ItemDetail :loading="tableLoading" :show.sync="showModal" :value="item" :title="`${action} Item`" :id="itemID" @submit="confirmSubmit" :action="action" ></ItemDetail>
        <div class="row">
            <div class="col-md-12 p-0">
                <filter-form v-if="filters.length" :columns="filters" @submit="submit"></filter-form>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 bg-white p-0 m-0">
                <item-table title="Recurring Expense List" :columns="defaultColumns" :data="data" :loading="tableLoading" @sort="sort"
                            :total="total" :model="model"  isAdd @add="addItem"  isExport @export="exportExcel"
                >
                    <template slot="amount" slot-scope="props">
                        <div>
                            {{ genFee(props.item.amount, props.item.currency) }}
                        </div>
                        <i class="ti-text text-info" @click="showTdDetail(props.item.room_title)"></i>
                    </template>
                    <template slot="physical_room__physical_room_id" slot-scope="props">
                        <span v-html="genPidLink(props)"></span>
                    </template>
                    <template slot="actions" slot-scope="props">
                        <button type="button" class="btn btn-info btn-outline btn-circle btn-md m-r-5" @click="editItem(props)">
                            <i class="fif fif-edit"></i>
                        </button>
                        <button type="button" class="btn btn-danger btn-outline btn-circle btn-md m-r-5" @click="deleteItem(props)">
                            <i class="fif fif-delete"></i>
                        </button>
                    </template>
                </item-table>
                <v-paginate :pageCount="pageCount" :page="page" @change="changePage"></v-paginate>
            </div>
        </div>
    </div>
</template>

<script>
    // components
    import vSelect from 'vue-select'
    import vPaginate from '@/components/widgets/Pagination'
    import ItemTable from '@/components/widgets/ItemTable'
    import ItemDetail from '@/components/widgets/ItemDetail'
    import FilterForm from '@/components/widgets/FilterForm'
    // mixin
    import {lifeHookMixin, itemMixin} from '@/mixins/item'
    import {getAjaxConf} from '@/utils'

    export default {
        name: "RecurringExpense",
        components: {vSelect, vPaginate, ItemTable, FilterForm, ItemDetail},
        mixins: [lifeHookMixin, itemMixin],
        data() {
            return {
            }
        },
        created() {
            for (let i in this.defaultColumns) {
                if (this.defaultColumns[i].key === 'physical_room__id') {
                    this.defaultColumns[i].ajax = getAjaxConf('PhysicalRoom', 'id', 'physical_room_id')
                }
            }
        },
        methods: {
            toCalendar(props) {
                window.open(`#/logicalroomcalendar/${props.item.logical_room_id}`)
            },
            genPidLink(props) {
                let arr = props.item.physical_room__physical_room_id.split(';')
                let a = ''
                for (let i in arr) {
                    let q = i == arr.length - 1 || arr.length == 1 ? '' : ';'
                    a += `<a href="#/physicalroomcalendar/${arr[i]}" target="_blank">${arr[i] + q}</a>`
                }
                return a
            }
        },
    }
</script>

<style scoped>

</style>